<!-- components/GlobalUnfollowDialog.vue -->
<template>
  <teleport to="body">
    <transition name="fade">
      <div
        v-if="visible"
        class="global-dialog-overlay transition-all duration-600"
        :style="dialogStyle"
        @click.self="close"
      >
        <!-- 收起、展开 -->
        <div
          class="global-dialog-expand pos-absolute px-3 transition-all duration-300"
          :style="expandStyle"
        >
          <div
            v-if="!isEpand"
            class="expand-icon flex flex-col justify-center items-center text-white cursor-pointer"
            @click="handleExpand"
            style=""
          >
            <el-icon size="12"><ArrowUp /></el-icon>
            <span class="text-sm"> 商品对比</span>
          </div>
          <div
            v-else
            class="expand-icon flex justify-center items-center text-white cursor-pointer pt-1"
            @click="handleExpand"
            style=""
          >
            <span class="text-sm"> {{ isEpand ? "收起" : "展开" }}</span>
            <el-icon><ArrowDown /></el-icon>
          </div>
        </div>
        <div class="global-dialog-content transition-all">
          <div class="pt-5">
            <p class="text-3.5 text-gray-300">
              {{ textTips }}
            </p>
          </div>
          <div class="flex items-center justify-between py-5">
            <div style="min-width: 95px">
              <span class="text-gray-1 text-sm">
                已选({{ ComparisonList.length }}<i class="text-gray-3">/4</i>)
              </span>
            </div>
            <div class="flex-1 pos-relative" style="height: 75px">
              <div class="flex gap-3 pos-absolute" style="width: 100%; top: 0; left: 0">
                <div
                  class="flex w-1/4 bg-white rounded-xl overflow-hidden"
                  v-for="(_, index) in MaxNumber"
                  :key="`empty-item-${index}`"
                >
                  <el-image
                    src="https://img13.360buyimg.com/img/jfs/t1/253444/24/21536/3420/67b2ade3Fb451ffcc/1393784db1669cb9.png"
                    style="width: 100%; height: 75px"
                  ></el-image>
                </div>
              </div>
              <div class="flex gap-3 justify-start" style="height: 75px">
                <div
                  class="w-1/4 bg-white rounded-xl pos-relative"
                  v-for="(item, index) in ComparisonList"
                  :key="item.id"
                  style="width: 158px"
                >
                  <div class="p-1.5 flex">
                    <span
                      class="pos-absolute text-gray-1 text-xs block border-rounded-full flex cursor-pointer"
                      style="
                        top: -5px;
                        right: -5px;
                        width: 21px;
                        height: 21px;
                        background-color: red;
                      "
                      @click="handleRemove(index)"
                    >
                      <el-icon color="#fff" size="15" style="margin: auto"
                        ><CloseBold
                      /></el-icon>
                    </span>
                    <div
                      style="width: 60px; height: 60px; min-width: 60px"
                      class="rounded-sm mr-1 overflow-hidden"
                    >
                      <el-image :src="item.img"></el-image>
                    </div>
                    <div class="text-gray-700">
                      <h5 class="text-sm line-clamp-2">
                        {{ item.name }}
                      </h5>
                      <Price price="1299" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="dialog-actions flex pl-3">
              <el-button @click="clearAll" type="default" class="clear-btn">
                一键清空
              </el-button>
              <el-button @click="goToCompare" type="danger" class="confim-btn">
                去对比
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </teleport>
</template>

<script setup lang="ts">
import { ref, shallowRef,toRaw , reactive, onMounted, onUnmounted, watch, computed } from "vue";
import { ArrowDown, ArrowUp, CloseBold } from "@element-plus/icons-vue";
import { storage } from "@/utils/storage";

const props = defineProps({
  product: {
    type: Object,
    default: () => ({}),
  },
});

const MaxNumber = 4;
const textTips = ref();
const  ComparisonList = ref<any[]>([]);
const visible = ref(true);

const dialogStyle = computed(() => ({
  transform: isEpand.value ? "translateY(0)" : "translateY(100%)",
}));
const expandStyle = computed(() => ({
  top: isEpand.value ? "-22.5px" : "-32.5px",
  height: isEpand.value ? "22.5px" : "32.5px",
}));
const open = (item: any): Promise<boolean> => {
  isEpand.value=true;
  return new Promise((resolve) => {
    if(ComparisonList.value.some((_item: any) => _item.id === item.id)){
      ComparisonList.value = ComparisonList.value.filter((_item: any) => _item.id !== item.id);
      updateComparisonList(ComparisonList.value)
      resolve(false);
    }
    if (ComparisonList.value.length >= MaxNumber) {
      textTips.value = "此栏已满，请先移除不需要对比的商品后再添加！";
      setTimeout(() => {
        textTips.value = "";
      }, 2350);
      resolve(false);
    } else {
      ComparisonList.value.push(item);
      updateComparisonList(ComparisonList.value)
      visible.value = true; // 直接修改 visible
      resolve(true); // 立即 resolve
    }
  });
};

const close = () => {
  visible.value = false;
};
const handleRemove = (i: number) => {
  console.log("handleRemove", i);
  const newList = [...ComparisonList.value];
  newList.splice(i, 1);
  updateComparisonList(newList);
};

const updateComparisonList = (newList: any[]) => {
  console.log("updateComparisonList", newList);
  ComparisonList.value = newList;
  storage.set("ComparisonList", newList); // 同步到本地存储
};
const clearAll = () => {
  updateComparisonList([]);
};
const goToCompare = () => {};

const isEpand = ref(false);
const handleExpand = () => {
  isEpand.value = !isEpand.value;
};

onMounted(() => {
  console.log("props.product", props.product);
  const list = storage.get('ComparisonList');
  if (list) {
    updateComparisonList(list as any[]);
  }
});
onUnmounted(() => {
});

// 暴露方法给其他组件使用
defineExpose({ open, close });
</script>

<style scoped lang="scss">
.global-dialog-overlay {
  position: fixed;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  .global-dialog-expand {
    width: 115px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("@/assets/images/f0306816fe786cd8.png");
    background-size: 100% 100%;
    transition: top 0.3s ease-in-out, height 0.3s ease-in-out;
  }
  .global-dialog-content {
    border-radius: 8px;
    min-width: 300px;
    width: 980px;
    margin: 0 auto;
    .dialog-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// el-button 样式覆盖
.clear-btn {
  background: transparent !important; /* 设置背景透明 */
  border: 1px solid var(--border-color-lighter) !important; /* 使用 Element Plus 的主题色作为边框色 */
  color: var(--text-color-white) !important; /* 使用 Element Plus 的主题色作为文字颜色 */
}

/* 添加悬停效果 */
.clear-btn:hover {
  background: rgba(
    var(--el-color-primary-rgb),
    0.1
  ) !important; /* 使用主题色的 RGB 值并添加透明度 */
}
.confim-btn {
  min-width: 95px;
  background: red !important; /* 设置背景透明 */
  border: 1px solid red !important; /* 使用 Element Plus 的主题色作为边框色 */
  color: var(--text-color-white) !important; /* 使用 Element Plus 的主题色作为文字颜色 */
  font-weight: 600;
}

</style>
